<template>
  <div class="page">
    <div class="mytop">
      <img class="mybg" src="../../../static/images/mybg.png" mode="widthFix">
      <!-- <div class="user"> -->
        <!-- <img src="../../../static/images/p03.jpg" mode="widthFix"> -->
         <button  class="user"  open-type="getUserInfo"  @getuserinfo="wxLogin"  >
           <template v-if="isHasUserInfo.nickName||isHasUserInfo.userName">
           <img :src="isHasUserInfo.avatarUrl||isHasUserInfo.avatar" mode="widthFix">
           <div style="text-align:center;">{{isHasUserInfo.nickName||isHasUserInfo.userName}}</div>
           </template>
             <template v-else>
           <img src="../../../static/images/default.png" mode="widthFix">
           <div>点击显示微信头像</div>
           </template>
         </button>
      <!-- </div> -->
    </div>
    <div class="mytop_card">
      <div class="weui-cell">
        <a  class="weui-cell__bd" @click="goMoneyDetail">
          <img src="../../../static/images/ic_ye.png" mode="widthFix">
          <div>¥{{appletGetInfo.balance}}</div>
        </a>
        <a @click="goPointsDetail" class="weui-cell__bd">
          <img src="../../../static/images/ic_jf.png" mode="widthFix">
          <div>{{appletGetInfo.points}}积分</div>
        </a>
        <a href="/pages/coupon/main" class="weui-cell__bd">
          <img src="../../../static/images/ic_yhq.png" mode="widthFix">
          <div>{{appletGetInfo.ticketNum}}张</div>
        </a>
      </div>
    </div>
    <div class="mycard">
      <div class="weui-cells">
         <a class="weui-cell weui-cell_access" v-if="isHasUserInfo&&isGetUserInfo!=1">
          <div class="weui-cell__bd" >
           登录手机号,获取更多信息
           <button  type="defult" class="loginBtn" style="float:right" form-type="submit" open-type="getPhoneNumber"  @getphonenumber="getPhoneNumber" >登录</button>
           <!-- <span style="float:right"></span> -->
          </div>

        </a>
        <a class="weui-cell weui-cell_access" href="/pages/order/main">
          <div class="weui-cell__bd">我的订单</div>
          <div class="weui-cell__ft"></div>
        </a>
<!--        <a class="weui-cell weui-cell_access" href="/pages/coupon/main">-->
<!--          <div class="weui-cell__bd">我的优惠券</div>-->
<!--          <div class="weui-cell__ft"></div>-->
<!--        </a>-->
        <a class="weui-cell weui-cell_access" href="/pages/cart/main">
          <div class="weui-cell__bd">我的购物车</div>
          <div class="weui-cell__ft"></div>
        </a>
        <a class="weui-cell weui-cell_access" href="/pages/consume/main">
          <div class="weui-cell__bd">我的消耗</div>
          <div class="weui-cell__ft"></div>
        </a>
        <a class="weui-cell weui-cell_access" href="/pages/myappointment/main">
          <div class="weui-cell__bd">我的预约</div>
          <div class="weui-cell__ft"></div>
        </a>
      </div>
    </div>
    <div class="mycard">
      <div class="weui-cells">
        <a class="weui-cell weui-cell_access" href="/pages/mycustomer/main">
          <div class="weui-cell__bd">我的顾客</div>
          <div class="weui-cell__ft"></div>
        </a>
        <div class="weui-cell my_customer">
          <a href="/pages/addcustomer/main" class="weui-cell__bd">
            <img src="../../../static/images/ic_xzgk.png" mode="widthFix">
            <div>新增顾客</div>
          </a>
          <a href="/pages/percentage/main" class="weui-cell__bd">
            <img src="../../../static/images/ic_tc.png" mode="widthFix">
            <div>我的提成</div>
          </a>
        </div>
      </div>
    </div>
    <!--登录-->
    <div v-if="showLogin">
        <div class="weui-mask"></div>
        <div class="weui-dialog">
            <div class="weui-dialog__hd pop_title">
              <strong>验证码登录</strong>
              <view class="close" @click="showLogin = false">x</view>
            </div>
            <div class="weui-dialog__bd pop_con">
                <div class="weui-cell weui-cell_select weui-cell_select-before">
                  <div class="weui-cell__hd">
                    <select class="weui-select" name="select2">
                        <option value="1">中国+86</option>
                    </select>
                  </div>
                  <div class="weui-cell__bd">
                    <input class="weui-input" v-model="phoneNum" type="number" pattern="[0-9]*" placeholder="请输入号码">
                  </div>
                </div>
                <div class="weui-cell weui-cell_vcode">
                    <div class="weui-cell__bd">
                        <input class="weui-input" v-model="testNum" type="tel" placeholder="请输入6位验证码">
                    </div>
                    <div class="weui-cell__ft">
                        <button v-if="!isSend" class="weui-vcode-btn"  @click="getTestNum">获取验证码</button>
                      <button v-if="isSend" class="weui-vcode-btn" disabled>{{num}}秒后重新获取</button>
                    </div>
                </div>
                <div class="weui-cell"></div>
            </div>
            <div class="weui-dialog__ft pop_btn">
                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" @click="submit">同意协议并登录</a>
            </div>
        </div>
    </div>

  </div>
</template>
<script>
import * as appId from "@/utils/util"
import * as appSecret from "@/utils/util"
import {toDecimal2} from "@/utils/util"
import {mapGetters,mapActions} from "vuex"
import {phoneNumCheck} from "@/utils/util"
export default {
  data () {
    return {
      showLogin: false,
      userInfo:{},
      phoneNum:"",//手机号
      num:60,//倒计时
      isSend:false,//是否发送验证码
      testNum:"",//验证码
      isGetUserInfo:"",
      isHasUserInfo:"",
      appletGetInfo:{
        balance:0,
        points:0,
        ticketNum:0
      }
    }
  },
  // computed:{
  //  isLogin(){
  //    return this.$store.state.isAuthenticated
  //  }
  // },
  onShow () {
    wx.setNavigationBarTitle({
      title: "我的"
    })
     this.isGetUserInfo = wx.getStorageSync('isGetUserInfo')

      this.isHasUserInfo =wx.getStorageSync('userInfo')&&JSON.parse(wx.getStorageSync('userInfo'))
       console.log(this.isHasUserInfo)
      if(!this.isHasUserInfo){
           wx.showToast({
                          title:'请先登录',
                          icon: 'none',
                          duration: 2000
                        })
      }else{
        this.getAppletGetInfo()
      }

    // let app = getApp()
  },
  methods: {
    toDecimal2,
    getTestNum(){//获取验证码
      console.log(this.phoneNum)
      let that=this;
      if(!phoneNumCheck(this.phoneNum)){
        wx.showToast({
          title: '请输入正确的手机号',
          icon: 'none',
          duration: 2000
        })
      }else{
        that.$http.request({
          method: "post",
          url: "/v1.0/appletLogin/appletSendShort",
          body: {
            appid: appId.appId,
            phone:that.phoneNum
          }
        }).then((data)=>{
          if(data.code==0){
            that.isSend=true;
            that.startTimer()
            wx.showToast({
              title: '已发送',
              icon: 'none',
              duration: 2000
            })
          }else{
            wx.showToast({
              title: '发送失败,请重试',
              icon: 'none',
              duration: 2000
            })
          }
        })
      }

    },
       wxLogin(){
       let that=this;
       console.log(123)
        wx.login({
           success(res) {
             console.log(res)
             that.code = res.code;
             wx.setStorageSync('openid',  that.code)
             that.setAppletCode(res.code)
             that.wxGetUserInfo(res.code)

           },
         })

     },
      wxGetUserInfo (code) {
       const that = this;
       wx.getUserInfo({
           withCredentials: true,
           success (res) {
            console.log(res)

             that.setUser(res)
               wx.setStorageSync('userInfo', JSON.stringify(res.rawData))
                that.isHasUserInfo =wx.getStorageSync('userInfo')&&JSON.parse(JSON.parse(wx.getStorageSync('userInfo')))
              // that.userInfo=JSON.parse(res.rawData);
              console.log(that.isGetUserInfo)
           },
           fail (err) {
               console.log('自动wx.getUserInfo失败:',err);
               // 显示主动授权的button
               that.buttonVisible = true;
           }
       })
     },
    submit(){
      if(!this.testNum){
        wx.showToast({
          title: '请填写验证码',
          icon: 'none',
          duration: 2000
        })
      }else if(!this.phoneNum){
        wx.showToast({
          title: '请输入手机号',
          icon: 'none',
          duration: 2000
        })
      }else{

      }
    },
    startTimer(){
      this.timer=setInterval(()=>{
        this.num--;
        if(this.num==0){
          clearInterval(this.timer)
        }
      })
    },
    ...mapGetters(['user','AppletCode']),
    ...mapActions(['setUser','setAppletCode','setIsAuthenticated']),
    getPhoneNumber(e){
      console.log(e)
      let that=this;
     // console.log(this.user())
      //  if(!this.userInfo){
         if(this.user()){
           let { encryptedData,userInfo,iv } =this.user()
           if (e.mp.detail.errMsg == 'getPhoneNumber:fail user deny') {//未授权
             this.showLogin=true;
             return false;
           }else{
             // wx.request({
             //   url: 'https://api.weixin.qq.com/sns/jscode2session',
             //   data: {
             //     appid:wx.getStorageSync('appId'),
             //     js_code:"",
             //     grant_type:"",
             //     secret:wx.getStorageSync('secret')
             //   },
             //   success:(data)=>{
             //     console.log(data)
             //   }
             // })
             that.$http.request({
               method: "post",
               url: "/v1.0/appletLogin/appletLogin",
               body: {
                 appletCode:that.AppletCode(),
                 phoneEncryptedData:e.mp.detail.encryptedData,
                 phoneIv:e.mp.detail.iv,
                 status: 0,
                 iv: iv,
                 extType: "WX",
                 appid:appId.appId,
                 appSecret:appSecret.appSecret,
                 encryptedData:encryptedData


               }
             }).then((data)=>{
               if (data.code == 0) {
                 console.log(data)
                 wx.setStorageSync('isGetUserInfo', 1)
                   this.isGetUserInfo = wx.getStorageSync('isGetUserInfo')
                 wx.setStorageSync('userInfo', JSON.stringify(data.result))
                 wx.setStorageSync('carNums',data.result.carNums)
                 that.setIsAuthenticated(true)
                 that.getAppletGetInfo()
                 // wx.setStorageSync('userInfo', JSON.stringify(data.result))
                 wx.showToast({
                   title: '获手机号成功',
                   icon: 'success',
                   duration: 2000
                 })
               } else {
                 wx.showToast({
                   title: `${data.message}`,
                   icon: 'none',
                   duration: 2000
                 })
               }
             })
           }
         }else{
             wx.showToast({
                   title: '请先获取用户信息',
                   icon: 'none',
                   duration: 2000
                 })
         }


    //  }
    },
    goPointsDetail(){
 const url = "/pages/integral/main?money="+this.appletGetInfo.points;
  wx.navigateTo({ url })
    },
    goMoneyDetail(){
      const url = "/pages/balance/main?money="+this.appletGetInfo.balance;
       wx.navigateTo({ url })
    },
    getAppletGetInfo(){//获取积分
       let phone=JSON.parse(wx.getStorageSync('userInfo')).mobileNo;
     // let {mobileNo}=this.isHasUserInfo;
        this.$http.request({
            method:"post",
            url:"/v1.0/appletLogin/appletGetInfo",
            body:{
                  phone:phone,
                  appid:appId.appId
            }
        }).then((data)=>{
          if(data.code==0){
            this.appletGetInfo=data.result;
             this.appletGetInfo.balance=this.toDecimal2(data.result.balance)
          }else{
                    wx.showToast({
                          title:`${data.message}`,
                          icon: 'none',
                          duration: 2000
                        })
          }

        }).catch((err)=>{

        })
    },
    bindViewTap () {
      const url = '../logs/main'
      if (mpvuePlatform === 'wx') {
        mpvue.switchTab({ url })
      } else {
        mpvue.navigateTo({ url })
      }
    }
  },


}
</script>

<style scoped>
.loginBtn{
  float:right;
  width: 150rpx;
  height: 65rpx;
  text-align: center;
  line-height: 65rpx;
  background: red;
  color: #fff;
}
.mytop{
  position: relative;
}
.mytop .mybg{
  width: 100%;
}
.mytop .user{
  position: absolute;
  width: 8em;
  left: 45%;
  top: 50%;
  margin-left: -3em;
  margin-top: -3.5em;
  text-align: center;
  color: #fff;
  background: transparent;
  border:none;
}

.mytop .user::after{
  border:none;
}
.mytop .user img{
  width: 3.4em;
  height: 3.4em;
  border-radius: 50%;
  border:1px #fff solid;
}
.mytop .user div{
  font-size: 0.8em;
}
.my_customer{
  text-align: center;
  font-size: 0.8em;
  color: #999;
  padding-top: 1.2em;
  padding-bottom: 0.8em;
}
.my_customer img{
  width: 3.2em;
}
.mytop_card{
  background: #fff;
  text-align: center;
  border-radius: 0.5em;
  box-shadow: 0px 0px 0.7em #ddd;
  font-size: 0.8em;
  color: #666;
  padding:0.6em 0;
  margin: -3em 1em 0.2em 1em;
  position: relative;
  z-index: 99;
}
.mytop_card img{
  width: 2em;
}
.mytop_card a{
  border-right: 1px #e5e5e5 solid;
}
.mytop_card a:last-child{
  border-right:none;
}
.pop_title{
  text-align: left;
  color: #333;
  position: relative;
  padding: 0.8em;
}
.pop_title .close{
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  width: 1em;
  height: 1em;
  line-height: 1em;
  text-align: center;
  font-size: 1.2em;
}
.pop_con{
  padding:0px 0.6em;
}
.pop_btn:after{
  display: none;
}
.pop_btn{
  padding: 0.6em 1.4em 1.4em 1.4em;
}
.pop_btn .weui-dialog__btn_primary{
  background: #FF787E;
  height: 2.2em;
  line-height: 2.2em;
  border-radius: 1.1em;
  color: #fff;
  text-align: center;
}
.weui-cell_vcode .weui-vcode-btn{
  color: #FF787E;
  font-size: 0.9em;
  border-left:0rpx;
  position: relative;
}
button.weui-vcode-btn:before{
  position: absolute;
  content: '';
  top: 0.8em;
  left: 0px;
  height: 1.6em;
  width: 1px;
  background: #eee;
}
button.weui-vcode-btn:after{
  display: none;
}
.weui-cell_select-before .weui-cell__hd:after{
  height: 1.6em;
  top: 0.8em;
}
</style>
